<template>
	<view>
		<view class="report-head">
			<view class="head-operation">
<!-- 				<u-icon name="phone" class="title">统计</u-icon>
 -->				
 <view class="m_header">
 	<text>统计</text>
 </view>
 <u-dropdown>
						<u-dropdown-item v-model="duration" :title="durationTitle" :options="durationList"></u-dropdown-item>
				</u-dropdown>
			</view>
			
			<view class="charts-box">
				<qiun-data-charts type="ring" :opts="customRing" :chartData="chartData" background="none"/>
			</view>
<!-- 			<view class="report-record">报修记录</view>
 -->			
 <view class="head-operation">
 	<view class="m_header">
 		<text>报修记录</text>
 	</view>
 </view><u-line></u-line>
			<view class="record">
				<record-item v-for="(item,index) in recordList" :key="index" :recordItem="item"></record-item>
			</view>
		</view>
	</view>
</template>

<script>
	import recordItem from '../components/record-item.vue' 
	export default {
		data() {
			return {
				duration:0,
				durationTitle:'本周',
				durationList:[
					{
						label:"本周",
						value:0
					},
					{
						label:"本月",
						value:1
					},
					{
						label:"自定义时间",
						value:2
					},
				],
				recordList:[
					{
						deviceName:'设备A',
						createTime:'2021-6-8 17:22:31',
						faultDev:'屏幕',
						faultReason:'屏幕排线损坏',
						recordState:1,
					},
					{
						deviceName:'设备B',
						createTime:'2021-6-8 17:22:31',
						faultDev:'屏幕',
						faultReason:'屏幕排线损坏',
						recordState:2,
					},
					{
						deviceName:'设备C',
						createTime:'2021-6-8 17:22:31',
						faultDev:'屏幕',
						faultReason:'屏幕排线损坏',
						recordState:3,
					},
				],
				chartData: {
					categories: [],
					series: [{
						"data": [{
								"name": "待审核",
								"value": 1
							},
							{
								"name": "待处理",
								"value": 3
							},
							{
								"name": "待维修",
								"value": 5
							},
							{
								"name": "已修好",
								"value": 0
							},
							{
								"name": "已完成",
								"value": 2
							}
						]
					}],
				},
				customRing:{
				    "type": "ring",
				    "canvasId": "",
				    "canvas2d": false,
				    "background": "none",
				    "animation": true,
				    "timing": "easeOut",
				    "duration": 1000,
				    "padding": [
				        5,
				        5,
				        5,
				        5
				    ],
				    "rotate": false,
				    "errorReload": true,
				    "fontSize": 13,
				    "fontColor": "#666666",
				    "enableScroll": false,
				    "touchMoveLimit": 60,
				    "enableMarkLine": false,
				    "dataLabel": false,
				    "dataPointShape": true,
				    "dataPointShapeType": "solid",
				    "legend": {
				        "show": true,
				        "position": "right",
				        "float": "center",
				        "padding": 5,
				        "margin": 5,
				        "backgroundColor": "rgba(0,0,0,0)",
				        "borderColor": "rgba(0,0,0,0)",
				        "borderWidth": 0,
				        "fontSize": 13,
				        "fontColor": "#666666",
				        "lineHeight": 25,
				        "hiddenColor": "#CECECE",
				        "itemGap": 4,
				    },
				    "title": {
						"show":false,
				        "name": "",
				        "fontSize": 15,
				        "color": "#666666",
				        "offsetX": 0,
				        "offsetY": 0
				    },
				    "subtitle": {
						"show":false,
				        "name": "",
				        "fontSize": 25,
				        "color": "#7cb5ec",
				        "offsetX": 0,
				        "offsetY": 0
				    },
				    "extra": {
				        "ring": {
				            "ringWidth": 30,
				            "centerColor": "#FFFFFF",
				            "activeOpacity": 0.5,
				            "activeRadius": 10,
				            "offsetAngle": 0,
				            "customRadius": 0,
				            "labelWidth": 5,
				            "border": false,
				            "borderWidth": 3,
				            "borderColor": "#FFFFFF",
				            "linearType": "none"
				        },
				        "tooltip": {
				            "showBox": true,
				            "showArrow": false,
				            "showCategory": false,
				            "borderWidth": 0,
				            "borderRadius": 0,
				            "borderColor": "#000000",
				            "borderOpacity": 0.7,
				            "bgColor": "#000000",
				            "bgOpacity": 0.7,
				            "gridType": "solid",
				            "dashLength": 4,
				            "gridColor": "#CCCCCC",
				            "fontColor": "#FFFFFF",
				            "splitLine": true,
				            "horizentalLine": false,
				            "xAxisLabel": false,
				            "yAxisLabel": false,
				            "labelBgColor": "#FFFFFF",
				            "labelBgOpacity": 0.7,
				            "labelFontColor": "#666666"
				        }
				    }
				}
			}
		},
		components:{
			recordItem
		},
	}
</script>

<style scoped lang="scss">
	.report-head {
		border-bottom: 20rpx solid #f6f6f6;
	}
	.charts-box {
		width: 100%;
		height: 400rpx;
	}
	.head-operation {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		align-items: center;
		.title{
			flex: 4;
		}
		
	}
	/deep/ .u-dropdown__content__mask{
		background: #ffffff !important;
	}
	.m_header {
		position: relative;
	
		text {
			font-size: 32rpx;
			font-weight: bold;
			padding-left: 30rpx;
	
		}
	
		text::before {
			position: absolute;
			left: 0;
			top: 4rpx;
			width: 6rpx;
			height: 36rpx;
			background-color: #009dff;
			border-radius: 3rpx;
			content: ' ';
		}
	}
	
	::v-deep .u-dropdown__menu__item {
		justify-content: flex-end !important;
	}
	
	::v-deep .record-item {
		padding: 30rpx;
		border-bottom: 20rpx solid #f6f6f6;
	}
	
	::v-deep .item-title {
		padding-bottom: 20rpx;
	}
	
	::v-deep .item-column {
		padding-bottom: 20rpx;
	}
	
	::v-deep .u-btn--primary {
		margin-top: 20rpx;
	}
</style>
